<template>
    <div>
        <h1>操作日志</h1>

<!--        &lt;!&ndash; 添加弹窗 &ndash;&gt;-->
<!--        <el-dialog title="新增" :visible.sync="dialogFormVisible">-->
<!--            <el-form :model="form" :rules="rules" ref="form">-->

<!--                <el-form-item label="老师ID" :label-width="formLabelWidth" prop="teacherID">-->
<!--                    <el-input v-model="from.name" autocomplete="off"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="学生ID" :label-width="formLabelWidth" prop="studentID">-->
<!--                    <el-input v-model="from.name" autocomplete="off"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="修改信息" :label-width="formLabelWidth" prop="info">-->
<!--                    <el-input v-model="form.info" autocomplete="off"></el-input>-->
<!--                </el-form-item>-->



<!--            </el-form>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="addRole">确 定</el-button>&lt;!&ndash;dialogFormVisible = false&ndash;&gt;-->
<!--            </div>-->
<!--        </el-dialog>-->


        <!-- 列表 -->
        <el-table :data="tableData" style="width:90%;margin: 0 auto" :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="id"
                    label="ID"
                    min-width="5%"
            >
            </el-table-column>

            <el-table-column
                    prop="teacher.name"
                    label="老师"
                    min-width="5%">

<!--                <template slot-scope="{row}">-->
<!--                    <el-form v-if="row.edit">-->
<!--                        <el-form-item>-->
<!--                            <el-input v-model="row.teacher.name" size="small"/>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                    <span v-else>{{ row.teacher.name }}</span>-->
<!--                </template>-->

            </el-table-column>
            <el-table-column
                    prop="student.name"
                    label="学生"
                    min-width="5%">

<!--                <template slot-scope="{row}">-->
<!--                    <el-form v-if="row.edit">-->
<!--                        <el-form-item>-->
<!--                            <el-input v-model="row.student.name" size="small"/>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                    <span v-else>{{ row.student.name}}</span>-->
<!--                </template>-->

            </el-table-column>


            <el-table-column
                    prop="info"
                    label="修改信息"
                    min-width="5%">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.info" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{row.info}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="ip"
                    label="ip地址"
                    min-width="5%">
            </el-table-column>

            <el-table-column
                    prop="inputTime"
                    label="操作时间"
                    sortable
                    min-width="5%">
                <template slot-scope="scope">
                    <span>{{scope.row.inputTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="handleInitRoles"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "LogView",
        data() {
            return {
                tableData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    levelName: '',
                    sort: '0',
                    //info:'',
                    inputId:'1'

                },
                pageNum:1,
                pageInfo: [],
            }
        },
        created() {
            this.handleInitRoles();
        },
        methods: {
            handleInitRoles(pageNum){
                //如果刷新页面pageNum为undefined，如果点击搜索按钮pageNum为事件对象，如果点击分页的页面才是一个数字
                if(typeof pageNum == "number"){
                    this.pageNum = pageNum;
                }
                else{
                    this.pageNum=1;
                }
                this.loading = true;
                this.$axios.post("/manage/log/list",{},{params:{pageNum:this.pageNum}}).then(response=>{
                    console.log(response.data.data)
                    this.pageInfo = response.data.data;
                    this.tableData = response.data.data.list;

                });
            },

        }
    }
</script>

<style scoped>
    .el-table{
        margin: 0 auto;
    }
    </style>